<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="ck">
        <input type="text" v-model="ming">名字
        <input type="text" v-model="cheng">成绩
        <button @click="tian">添加</button>
        <button @click="sheng">升序</button>
        <button @click="jiang">降序</button>
         <table border="1">
             <thead>
                <tr>
                    <td>ID</td>
                    <td>名字</td>
                    <td>成绩</td>
                    <td>操作</td>
                </tr>
             </thead>
             <tbody>
                <tr v-for="item in arr":key="item.id">
                    <th>{{item.id}}</th>
                    <th>{{item.name}}</th>
                    <th>{{item.price}}</th>
                    <th><button  @click="shan(item.id)">删除</button></th>
                </tr>
             </tbody>
         </table>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <script>
          new Vue({
            el:'#ck',
            data:{
                ming:'',
                cheng:'',
                arr:[{
                    id:0,
                    name:'皇上',
                    price:100
                },{
                    id:1,
                    name:'太监',
                    price:70
                },{
                    id:2,
                    name:'宫女',
                    price:80
                },{
                    id:3,
                    name:'侍卫',
                    price:20
                },]
            },
            methods:{
                 shan(i){
                     var a=this.arr.find(item=>item.id==i)
                     this.arr.splice(a,1)
                 },
                 tian(){
                    this.arr.push({
                        id:this.arr.length,
                        name:this.ming,
                        price:this.cheng
                    })
            },
            sheng(){
                this.arr.sort((a,b)=>b.price-a.price)
            },
            jiang(){
                this.arr.sort((a,b)=>a.price-b.price)
            }   
        },
        coputed:{
                    
            }
          })
    </script>
</body>
</html>